<template>
	<view class="operation">
		<view class="operation-header flexR">
			<view class="operation-header-left flexC">
				<text class="status" :style="{color:statusColor}" >{{transSatus||'完成'}}</text>
				<text class="date">{{transDate||'2021-02-23'}}</text>
			</view>
			<view class="operation-header-right flexC">
				<text>{{opetationInfo.blh||''}}</text>
				<text>{{opetationInfo.hzxm||'' + ' ' + opetationInfo.sex||'' + ' ' + opetationInfo.age||''}}</text>
				<text>{{opetationInfo.bqmc||'' + ' ' + opetationInfo.cwdm?opetationInfo.cwdm+'床':''}}</text>
			</view>
		</view>
		<view class="sawtooth flexR bg-light">
			<image src="../../../static/images/imgs/sawtooth.png" mode="scaleToFill"></image>
		</view>
		<view class="operation-main">
			<u-steps :list="numList" :current="currentStatus" direction='column'></u-steps>
		</view>
	</view>
</template>

<script>
	import { getOperation } from '@/api/home.js'
	import Load from '@/components/Load/index.vue'
	export default {
		components:{ Load },
		data() {
			return {
				currentStatus:0,
				queryInfo:'',
				opetationInfo:''
			}
		},
		computed:{
			// 状态颜色属性
			statusColor:function(){
				let res = '' ;
				if (this.opetationInfo.sszt===3) {
					res = '#ccc'
				}else{
					if (this.currentStatus===0||this.currentStatus===1) {
					  res = '#65D0AB'
					}else if (this.currentStatus===2) {
					  res = '#1aaba8'
					}else{
					  res = '#ccc'
					}
				}
				return res;
			},
			// 日期与当前进度解析
			transDate:function(){
				let res = '',date;
				let cTime = this.opetationInfo.cssssj.replace(/\s/g, "");
				let jTime = this.opetationInfo.jssssj.replace(/\s/g, "");
				let startTime = this.opetationInfo.kssj.replace(/\s/g, "");
				let endTime = this.opetationInfo.jssj.replace(/\s/g, "");
				let aTime = this.opetationInfo.aprq.replace(/\s/g, "");
				if (this.opetationInfo.sszt === 0 ) {
					if (jTime) {
					  date = jTime;
					  this.currentStatus = 1;
					} else {
					  date = aTime; // 计划
					  this.currentStatus = 0;
					}
				}else if (this.opetationInfo.sszt === 1) {
					date = startTime;
					this.currentStatus = 2;
				} else if(this.opetationInfo.sszt === 2) {
					this.currentStatus = 3;
					if (cTime) {
					  date = cTime;
					  this.currentStatus = 4;
					} else {
					  date = endTime; // 计划
					  this.currentStatus = 3;
					}
				}else if (this.opetationInfo.sszt === 3) {
					this.currentStatus = 0;
				}
				if (date) {
					res = `${date.substr(0,4)}-${date.substr(4,2)}-${date.substr(6,2)}`
				}
				return res;
			},
			// 手术状态解析
			transSatus:function(){
				let res = '',status = this.opetationInfo.sszt;
				if (status===0) {
					res = '计划';
				}else if (status===1) {
					res = '手术中';
				}else if (status===2) {
					res = '完成';
				}else if (status===3) {
					res = '手术取消';
				}
				return res;
			},
			numList(){
				let res = this.opetationInfo
				if(res){
					let str = '',
					jTime = res.jssssj.replace(/\s/g, ""),
					cTime = res.cssssj.replace(/\s/g, ""),
					startTime = res.kssj.replace(/\s/g, ""),
					endTime = res.jssj.replace(/\s/g, ""),
					name1,name2,name3,name4,name5
					if(res.sskdmc){
						str += res.sskdmc + " "
					}
					if(res.roomno){
						str += res.roomno + "手术间 "
					}
					if(res.sstc){
						str += `第${res.sstc}台`;
					}
					name1 = {
						name: `手术安排 ${str}`
					}
					if(jTime){
						let date = `${jTime.substr(0,4)}-${jTime.substr(4,2)}-${jTime.substr(6,2)} ${jTime.substr(8)}`
						name2 = {
							name: `入手术室 ${date}`
						}
					}else{
						name2 = {
							name: `入手术室`
						}
					}
					if(startTime){
						let date = `${startTime.substr(0,4)}-${startTime.substr(4,2)}-${startTime.substr(6,2)} ${startTime.substr(8)}`
						name3 = {
							name: `手术开始 ${date}`
						}
					}else{
						name3 = {
							name: `手术开始`
						}
					}
					if(endTime){
						let date = `${endTime.substr(0,4)}-${endTime.substr(4,2)}-${endTime.substr(6,2)} ${endTime.substr(8)}`
						name4 = {
							name: `手术完成 ${date}`
						}
					}else{
						name4 = {
							name: `手术完成`
						}
					}
					if(cTime){
						let date = `${cTime.substr(0,4)}-${cTime.substr(4,2)}-${cTime.substr(6,2)} ${cTime.substr(8)}`
						name5 = {
							name: `出手术室 ${date}`
						}
					}else{
						name5 = {
							name: `出手术室`
						}
					}
					return [name1, name2, name3, name4, name5]
				}else{
					return [{name:'手术安排'},{name:'入手术室'},{name:'手术开始'},{name:'手术完成'},{name:'出手术室'}]
				}
			}
		},
		onLoad(op) {
			if(op.query){
				this.queryInfo = JSON.parse(op.query)
				this.initData()
			}
			if(op.params) {
				this.opetationInfo = JSON.parse(op.params)
			}
		},
		methods: {
			initData(){
				this.load = true
				getOperation(this.queryInfo).then(data => {
					this.load = false
					if(data.length){
						this.opetationInfo = data[0]||''
					}else{
						this.opetationInfo = ''
					}
				}).catch(e => {
					this.opetationInfo = ''
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.operation{
		height: calc(100vh);
		overflow: scroll;
		background-color: $uni-bg-color;
		&-header{
			background-color: $theme-color-light;
			padding: 30rpx;
			color: #FFF;
			&-left{
				border-radius: 12rpx;
				border: 2px solid #FFF;
				text-align: center;
				width: 180rpx;
				background-color: #FFF;
				margin-right: 30rpx;
				.status{
					padding: 40rpx 0;
					text-align: center;
				}
				.date{
					background-color: $orage-color;
					color: #fFF;
					font-size: 22rpx;
					border-radius:0 0 12rpx 12rpx;
				}
			}
			&-right{
				justify-content: space-between;
			}
		}
		.sawtooth{
			justify-content: center;
			align-items: center;
		}
		&-main{
			padding: 0 30rpx;
		}
	}
</style>
